<template>
    <div>
        <br>
        <br>
        <div :style="{display:'flex'}">
            <div v-show="bar.data.length>0" :style="{marginRight:'50px',paddingRight:'20px',flex:2}">
                <!--柱状-->
                <v-chart :forceFit='true' :height='bar.height' :data='bar.data' :scale='bar.scale'>
                    <v-tooltip/>
                    <v-legend
                            :custom='bar.legendCustom'
                            :allow-all-canceled='bar.legendAllowAllCanceled'
                            :items='bar.legendItems'
                            :on-click='legendOnClick'
                    />
                    <v-axis data-key='money' :grid='bar.axisGrid' :label='bar.axisLabel'/>
                    <v-bar position='name*money' color='#3182bd'/>
                    <v-smooth-line position='name*num' color='#fdae6b' :size='bar.gemoSize'/>
                    <v-point shape='circle' position='name*num' color='#fdae6b' :size='bar.gemoSize'/>
                </v-chart>
            </div>
            <!--表格-->
            <div :style="{flex:1,paddingTop:'30px'}">
                <table>
                    <thead>
                    <tr v-if="tableData.length>0">
                        <th></th>
                        <th>订单</th>
                        <th>出口额</th>
                    </tr>
                    </thead>
                    <tbody v-if="tableData.length>0">
                    <tr>
                        <td class="strong">{{tableData[1].title}}</td>
                        <td>{{tableData[1].num}} 家</td>
                        <td class="long">{{tableData[1].money}} {{tableData[1].unit}}</td>
                    </tr>
                    <tr>
                        <td class="strong">{{tableData[0].title}}</td>
                        <td>{{tableData[0].num}} 家</td>
                        <td class="long">{{tableData[0].money}} {{tableData[0].unit}}</td>
                    </tr>
                    <tr>
                        <td class="strong">{{tableData[2].title}}</td>
                        <td>{{tableData[2].num}} 家</td>
                        <td class="long">{{tableData[2].money}} {{tableData[2].unit}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div :style="{display:'flex'}">
            <div v-show="pie.data.length>0" :style="{flex:1}">
                <h2>出口商品Top5</h2>
                <v-chart :forceFit='true' :height='pie.height' :data='pie.data' :scale='pie.scale'>
                    <v-tooltip :showTitle='false' data-key='item*percent'/>
                    <v-axis/>
                    <v-legend data-key='item'/>
                    <v-pie position='percent' color='item' :v-style='pie.pieStyle' :label='pie.labelConfig'/>
                    <v-coord type='theta'/>
                </v-chart>
            </div>
            <div :style="{flex:1}">
                <h2 v-show="pie2.data.length>0">出口商品环比3天</h2>
                <v-chart v-show="pie2.data.length>0" :forceFit='true' :height='pie2.height' :data='pie2.data' :scale='pie2.scale'>
                    <v-tooltip :showTitle='false' :itemTpl='pie2.itemTpl'/>
                    <v-coord type='theta' :radius='0.5'/>
                    <v-pie
                            position='percent'
                            :color="'type'"
                            :label='pie2.label'
                            :select='false'
                            :vStyle='pie2.style'
                            :tooltip='pie2.tooltip'
                    />
                    <v-view :data='pie2.viewData' :scale='pie2.scale'>
                        <v-coord type='theta' :radius='0.75' :innerRadius='0.5 / 0.75'/>
                        <v-pie
                                position='percent'
                                :color='pie2.color'
                                label='name'
                                :select='false'
                                :vStyle='pie2.style'
                                :tooltip='pie2.tooltip'
                        />
                    </v-view>
                </v-chart>
            </div>
        </div>
        <p style='text-align: center;color:#888;'>当前数据仅供参考</p>
        <br>
        <br>
        <br>
    </div>
</template>

<script>
    import {getDataCount, getDataBar, getDataTops,getDataChain} from '@/api/show_data';
    import Vue from 'vue';
    import Viser from 'viser-vue';

    Vue.use(Viser);
    const DataSet = require('@antv/data-set');
    export default {
        data() {
            return {
                bar: {
                    data: [],
                    scale: [],
                    height: 300,
                    width: 200,
                    axisLabel: {
                        textStyle: {
                            fill: '#fdae6b'
                        }
                    },
                    axisGrid: null,

                    gemoSize: 3,

                    legendCustom: true,
                    legendAllowAllCanceled: true,
                    legendItems: [
                        {
                            value: '金额',
                            marker: {symbol: 'square', fill: '#3182bd', radius: 5}
                        },
                        {
                            value: '订单',
                            marker: {
                                symbol: 'hyphen',
                                stroke: '#fdae6b',
                                radius: 5,
                                lineWidth: 3
                            }
                        }
                    ]
                },
                pie: {
                    data: [],
                    scale: [],
                    height: 400,
                    pieStyle: {
                        stroke: '#fff',
                        lineWidth: 1
                    },
                    labelConfig: [
                        'percent',
                        {
                            formatter: (val, item) => {
                                return item.point.item + ': ' + val;
                            }
                        }
                    ]
                },
                pie2: {
                    data: [],
                    scale: [],
                    viewData: [],
                    height: 400,
                    itemTpl: [],
                    tooltip: [],
                    color: [],
                    label: [],
                    style: []
                },
                tableData: []
            };
        },
        created() {
            let that = this;
            setTimeout(function () {
                that.dataInit();
                that.barInit();
                that.pieInit();
                that.pie2Init();
            }, 200)
        },
        mounted() {
            this.dataInit();
            this.barInit();
            this.pieInit();
            this.pie2Init();
        },
        watch: {
            $route() {
                this.dataInit();
                this.barInit();
                this.pieInit();
                this.pie2Init();
            }
        },
        methods: {
            dataInit() {
                getDataCount().then(res => {
                    if (res.code == 0) {
                        this.tableData = res.data;
                    } else {
                        this.$notify.error(res.msg)
                    }
                })
            },
            barInit() {
                let _data = [];
                this.bar.data = [];
                getDataBar().then(res => {
                    if (res.code == 0) {
                        _data = res.data;
                        this.bar.data = _data
                    }
                }).catch(err => {
                    console.log(err)
                })
                this.bar.scale = [
                    {
                        dataKey: 'call',
                        min: 0
                    },
                    {
                        dataKey: 'money',
                        alias: '金额（万美元）',
                        min: 0
                    },
                    {
                        dataKey: 'num',
                        alias: '订单（个）',
                        min: 0
                    }
                ];
            },

            pieInit() {
                // const sourceData = [
                //     {item: '印刷机', count: 40},
                //     {item: '寝具', count: 21},
                //     {item: '服装', count: 17},
                //     {item: '玻璃陶瓷', count: 103},
                //     {item: '玩具', count: 9}
                // ];

                getDataTops().then(res => {
                    if (res.code == 0) {
                        let sourceData = [];
                        // sourceData = res.data;
                        res.data.forEach(function (el,idx) {
                            let arr = {};
                            arr.item = el.name;
                            arr.count = el.num;
                            sourceData.push(arr)
                        })
                        // const sourceData = [
                        //     {item: '印刷机', count: 40},
                        //     {item: '寝具', count: 21},
                        //     {item: '服装', count: 17},
                        //     {item: '玻璃陶瓷', count: 103},
                        //     {item: '玩具', count: 9}
                        // ];

                        this.pie.scale = [
                            {
                                dataKey: 'percent',
                                min: 0,
                                formatter: '.0%'
                            }
                        ];

                        const dv = new DataSet.View().source(sourceData);
                        dv.transform({
                            type: 'percent',
                            field: 'count',
                            dimension: 'item',
                            as: 'percent'
                        });
                        this.pie.data = dv.rows;
                    }
                }).catch(err => {
                    console.log(err)
                })

            },
            pie2Init() {
                /*   const sourceData = [
                       {value: 0, type: '十月', name: '毛皮'},
                       {value: 0, type: '十月', name: '珠宝'},
                       {value: 0, type: '十一月', name: '化学纤维'},
                       {value: 0, type: '十一月', name: '无机化学品'},
                       {value: 0, type: '十二月', name: '木制品'},
                       {value: 0, type: '十二月', name: '有机化学品'}
                   ];*/


                getDataChain().then(res=>{
                    if(res.code ==0){
                        let sourceData = [];

                        let rsp =[];

                        rsp = rsp.concat(res.data.productListToday);
                        rsp = rsp.concat(res.data.productListYestoday)
                        rsp = rsp.concat(res.data.resultListBeforeYestoday);
                        rsp.forEach(function (el,idx) {
                            let obj = {};
                            obj.value = el.num;
                            obj.name = el.name;
                            obj.type = el.title;
                            sourceData.push(obj)
                        })
                        const dv = new DataSet.View().source(sourceData);
                        dv.transform({
                            type: 'percent',
                            field: 'value',
                            dimension: 'type',
                            as: 'percent'
                        });
                        this.pie2.data = dv.rows;

                        const viewDv = new DataSet.View().source(sourceData);
                        viewDv.transform({
                            type: 'percent',
                            field: 'value',
                            dimension: 'name',
                            as: 'percent'
                        });
                        this.pie2.viewData = viewDv.rows;

                        this.pie2.scale = {
                            dataType: 'percent',
                            formatter: '.2%'
                        };

                        this.pie2.itemTpl =
                            "<li><span style='background-color:{color};' class='g2-tooltip-marker'></span>{name}: {value}</li>";

                        this.pie2.style = {
                            lineWidth: 1,
                            stroke: '#fff'
                        };

                        this.pie2.label = ['type', {offset: -10}];

                        this.pie2.tooltip = [
                            'name*percent',
                            (item, percent) => {
                                percent = (percent * 100).toFixed(2) + '%';
                                return {
                                    name: item,
                                    value: percent
                                };
                            }
                        ];

                        this.pie2.color = [
                            'name',
                            ['#BAE7FF', '#7FC9FE', '#71E3E3', '#ABF5F5', '#8EE0A1', '#BAF5C4']
                        ];
                    }
                })



            },
            legendOnClick: (ev, chart) => {
                const item = ev.item;
                const value = item.value;
                const checked = ev.checked;
                const geoms = chart.getAllGeoms();
                for (let i = 0; i < geoms.length; i++) {
                    const geom = geoms[i];
                    if (geom.getYScale().field === value) {
                        if (checked) {
                            geom.show();
                        } else {
                            geom.hide();
                        }
                    }
                }
            }
        }
    };
</script>

<style scoped>

    table {
        border-collapse: collapse;
        border: 1px solid #eee;
    }

    th {
        height: 40px;
    }

    td {
        min-width: 120px;
        height: 40px;
        border: 1px solid #eee;
        text-align: center;
    }

    .strong {
        font-weight: bold;
    }

    .long {
        min-width: 180px;
    }

    h2 {
        text-align: center;
    }
</style>
